<template>
  <div class="juese3">
    <daohang @handletab="maodian" :list="list"></daohang>

    <div class="jueseContent" ref="jueseContent">
      <div class="zhuli" ref="title1" id="section1">
        <div class="startTitle  animate__animated animate__fadeInUp">
          智能助理
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in jscList" :key="i"  :class="'animate__animated animate__fadeInUp animate__delay-0' + i * 1 + 's'">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
      <div class="zhuli" ref="title1" id="section2">
        <div class="startTitle  animate__animated animate__fadeInUp">
          智能数据驾驶舱
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, i) in zuliList" :key="i"
            :class="'animate__animated animate__fadeInUp animate__delay-0' + i * 1 + 's'">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>



      

      <div class="zhuli" ref="title1" id="section3">
        <div class="startTitle  animate__animated animate__fadeInUp">
          智能应用
        </div>
        <el-row :gutter="20" type="flex">
          <el-col :span="8" v-for="(item, i) in cygnList" :key="i">
            <div class="item" style="margin-bottom: 0;">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
      <div class="zhuli" ref="title1" id="section3">
        <div class="startTitle  animate__animated animate__fadeInUp">
          信息资讯
        </div>
        <el-row :gutter="20" type="flex">
          <el-col :span="8" v-for="(item, i) in xinxiList" :key="i">
            <div class="item">

              <div class="title">
                {{ item.name }}
              </div>
              <div class="content">
                {{ item.content }}
              </div>
              <div class="anniu">
                查看详情
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: '1',
          name: "智能助理",
          active: true,
        },
        {
          id: '2',
          name: "数据驾驶舱",
          active: false,
        },
        {
          id: '4',
          name: "常用功能",
          active: false,
        },
        {
          id: '5',
          name: "信息资讯",
          active: false,
        },
      ],
      zuliList: [
        {
          name: '运营态势感知',
          content: '整合各商区及周边区域的商户企业服务资源，构建“一张网、全覆盖、多层级”的旅游港生态商家服务与运营体系。实时展示运营服务带来的经营提升数据，致力于“让数据产生价值，让数据成为新的生产力”，打造线上 1+N 架构的统筹运营平台（1 指集团总部，N 指各旅游港营商服务+运营主体），实现运营资源信息互联互通，共享共用',
        },

        {
          name: '旅游港商业布局全景',
          content: '商业布局全景旨在直观呈现地域、商户全貌，覆盖全景概览、商业布局、商户辐射、分布等内容。并通过客流动向、到店客流量，商户总览、商业发展趋势维度分析，使运营者迅速直观地抓取区域全貌。在地图上以柱体高低的形式显示每个区域在每个时间段新增的商户数量；再通过商业配比变迁、商户发展、业态分布、新增商户维度全面了解旅游港演进和商户辐射的概况态',
        },{
          name: '动销分析',
          content: '通过计算商品的动销率和周转率等指标来评估商品的销售状况，帮助商家更好地了解商品的销售状况和市场表现，从而制定更有针对性的营销策略和计划，提高商品的销售和市场竞争力',
        },


      ],
      jscList: [
        {
          name: '智能坪效预警',
          content: '通过对商区商户的坪效分析可以更好地了解商户的经营状况和市场竞争情况，从而制定出更有针对性的营销策略和计划，提高经营效益和市场竞争力',
        },
        {
          name: '商户运营助理',
          content: '提供开放性、互动式、多圈层服务功能。结合AIGC提供的精准建议，跟进每一个重要事项的关键节点，并在事项结束后进行总结复盘，打造营商服务“一张网”服务好商家；结合数据驾驶舱相关数据帮助商户提供智能建议并跟进落地执行，提升商户经营业绩',
        },{
          name: '商区产业链图谱建议',
          content: '根据商业区域内各个商户产业之间的关联和互动关系，包括上游供应商、中游生产商和下游销售商等。清晰地分析产业链的整体结构和各个环节之间的联系。发现商户切实需求，并给于智能建议和跟进落地',
        },{
          name: '商区品牌矩阵趋势提醒',
          content: '商区内各个品牌之间的关系和竞争态势。通过了解和分析商区品牌矩阵，智能助理提出智能建议，帮助企业更好地制定市场营销策略，提高品牌竞争力',
        },{
          name: '商区产业画像群分析',
          content: '通过营商运营服务，对商区内商户企业建立了个性化服务档案，通过政策和市场双轮分级服务能力搭建，增强了旅游港运营的亲商强商稳商能力。商户企业服务的持续开展和过程数据采集更新，形成了动态更新的商户企业画像，并进一步汇聚形成了旅游港区域商户产业画像，为后续旅游港商户产业治理政策制定和商户企业服务项目筛选提供了动态数据支撑'
        },{
          name: '智能客流',
          content: '通过对商区客流量进行实时监控和预测，提前发现客流高峰和低谷，以便及时提醒运营和商户采取应对措施，提前准备耗材及食材，同时避免客流拥堵和安全问题的发生'
        },
      ],
      cygnList: [
        {
          name: '同业联盟/异业联盟/商业拓展',
          content: '结合商接内部商户业态，且引入外部业态资源进行联盟，推出商街特色营销活动',
        },
        {
          name: '供应链共享',
          content: '商区内商户企业间的供应链共享，包括但不限于：耗材，上下游食材等消费者投诉/商户投诉:通过自动派单功能将商户企业/消费者投诉需求分配到指定服务专员手中，使业务能够及时处理。商户企业库、服务专员库收录了所有商户企业和服务专员的相关信息。服务专员可对诉求工单进行相应处理。',
        },
        {
          name: '消费者投诉/商户投诉',
          content: '通过自动派单功能将商户企业/消费者投诉需求分配到指定服务专员手中，使业务能够及时处理。商户企业库、服务专员库收录了所有商户企业和服务专员的相关信息。服务专员可对诉求工单进行相应处理',
        },
        {
          name: '政务协助',
          content: '政策协助是旅游港面向商户企业提供的核心服务之一，为确保商户企业能够高效、精准的匹配到符合条件的政策。',
        },
        {
          name: '商户管理',
          content: '通过AIGC将多源数据进行汇集、研判、可视化呈现，实现扁平化的智慧管控，汇聚空间、商户企业资料、履约品质分析 、 智能收益管理，经营分析，客流，商品偏好， 活力指数等实时动态信息，有关联性的进行呈现，并可随着时间维度洞察发展趋势，帮助旅游港的管理者做到随时随地“摸清家底”。 ',
        },
        {
          name: '装修推荐',
          content: '为商区内商户企业推荐性价比高的装修服务商，帮助商家降本',
        },
        {
          name: '停车助理',
          content: '结合面客端小程序，推送停车服务',
        },


        {
          name: '技术辅助',
          content: '为商区内商户企业进行系统的技术服务及目标技术服务公司协助选型',
        },
      ],
      xinxiList: [
        {
          name: '产业智库',
          content: '提供研究产业发展趋势，政策建议，研究报告，对产业发展进行深入剖析，实时国际国内商业资讯，及同业情报推送。做好旅游港及商户的产业智库为商区发展提供参考'
        },{
          name: '商圈资讯',
          content: '商业区域内的商业活动和趋势的信息。消费者的购物行为和偏好，以及政策、法规等方面的资讯'
        },{
          name: '消费者投诉/商户投诉',
          content: '通过自动派单功能将商户企业/消费者投诉需求分配到指定服务专员手中，使业务能够及时处理。商户企业库、服务专员库收录了所有商户企业和服务专员的相关信息。服务专员可对诉求工单进行相应处理'
        },{
          name: '竞业情报',
          content: '通过合法手段获取竞争对手的商业机密和战略信息，以便更好地了解竞争对手，制定出更有针对性的商业运营策略'
        }
      ]
    }
  },
  mounted() {
    ;
  },
  methods: {
    name() {

    },
    maodian(num) {
      this.list.map((item, i) => {
        if (i <= (num - 1)) {
          item.active = true
        } else {
          item.active = false
        }
      })
      var tar = document.getElementById('section' + num)
      var soltop = tar.offsetTop
      $(this.$refs.jueseContent).animate({
        scrollTop: soltop - 280
      }, 666)
      this.$forceUpdate()
    },
  },
}
</script>
<style scoped>
@import "../../../assets/css/buzoutiao.css";
</style>
<style lang="scss" scoped>
.juese3 {
  height: 100%;

  .jindu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    background: #FFFFFF;
    box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
    border-radius: 12px 12px 12px 12px;
    opacity: 1;
    border: 0px solid #DDDDDD;

    .steps {
      justify-content: center;
    }

    .juli {
      margin-right: 253px;
    }

    .juli2 {
      margin-right: 211px;
    }
  }

  .jueseContent {
    // width: 100%;
    // padding-top: 20px;
    // overflow-y: auto;
    // // border: 1px solid red;
    // height: calc(100% - 88px);

    .startTitle {
      font-size: 20px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 16px;
    }

    .item {
      box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
      border-radius: 12px;
      background: #FFFFFF;
    }

    .zhuli {
      width: 100%;
      overflow: hidden;

      .item {
        height: 100%;
        padding: 32px;
        margin-bottom: 24px;
        background: url('~@/assets/images/mkBj.png') repeat;
        background-size: cover;
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-10px);
        }

        .title {
          font-size: 24px;
          font-weight: 600;
          color: #000000;
        }

        .content {
          margin: 21px 0 30px;
          font-size: 18px;
          font-weight: 400;
          color: #000000;
          display: -webkit-box;
          display: -moz-box;
          // white-space: pre-wrap;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          /* 实现限制文字显示多少行,也就是说要多少行是出现省略号,我这里设置三行就让文本出现省略号 */
          -webkit-line-clamp: 3;
          /*显示行数  要几行就改几行*/
        }

        .anniu {
          text-align: center;
          line-height: 56px;
          height: 56px;
          cursor: pointer;
          border-radius: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #0661FB;
          background: #FFFFFF;
          border: 1px solid rgba(202, 202, 202, 0.67);
          transition: all 0.4s;

          &:hover {
            color: #FFFFFF;
            background: #0661FB;
            border: 1px solid #0661FB;
            box-shadow: 0px 0px 20px 0px rgba(6, 97, 251, 0.3);
          }
        }
      }
    }


  }


}
/deep/ .el-row--flex{
  flex-wrap: wrap;
  .item{
    box-sizing: border-box;
  }
  .el-col{
    margin-bottom: 24px;
  }
}
</style>